import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input } from 'antd';
import EftBuySellC from '../../InvestmentManage/EtfTradeNew/orderComps/eftBuySell';
import BondTradeDetailC from '../../InvestmentManage/BondTradeNew/orderComps/bondTradeDetail';
import FinaFlockDetailC from '../../InvestmentManage/finaFlockingNew/orderComps/orderFormC';
import NonstandardOrderDetailC from '../../InvestmentManage/nonstandardOrder/orderComps/orderFormC';
import InterBank from '../../InvestmentManage/BuybackOrder/interBank';
import BuyBackOrderExchangePledge from '../../InvestmentManage/BuybackOrder/exchangePledge/baseInfoC';
import BuyBackContractC from '../../InvestmentManage/Trade/BuyBackContract';
import FundTrade from '../../InvestmentManage/FundTrade1/FundTrade';
import DepositOrderDetail from '../../InvestmentManage/depositOrderNew/DepositOrderDetail';
import InstructionSend from '../../InvestmentManage/StockOrder/InstructionSend';
import BondLend from '../../PortfolioMnt/TradeBook/BondLending/common/index';
import BondOffLine from '../../InvestmentManage/bondOffline/orderComps/addOrder';
import HKdetail from '../../InvestmentManage/HKstock/orderComps/orderFormC';
import ApprovalHistory from '../../agencyTask/approvalHistory';
import 'moment/locale/zh-cn';
import { ModalC, SelectC, SecondHeaderC, InputNumberC, TableC } from '../../../comps';
import statusData from '../../../utils/enumeratedValues/statusData';
import typeOfTradeX from '../../PortfolioMnt/BookkeepingMnt/typeOfTradeX.js';

const FormItemLayout = {
  labelCol: {
    span: 8,
    offset: 0,
  },
  wrapperCol: {
    span: 15,
    offset: 0,
  },
};
@Form.create()
class Detail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      infos: {},
      type: '',
      info: {},
      timeStamp: undefined,
      infoDetail: {},
      instructType: '',
      riskInfromation: [], // 风控信息
      clinchInfromation: undefined, // 成交信息
      isRisk: false, // 风控信息是否存在
      isClinch: false, // 成交信息是否存在
      columns: [],
    };
  }
  componentDidMount() {
    const { detailObj, dispatch } = this.props;
    this.loadValue(detailObj);
    //风控非通过状态下展示
    if (detailObj.riskStatus != '0') {
      dispatch({
        type: 'queryTradeM/riskInfromation',
        payload: {
          instructionId: detailObj.id,
          currentPage: 1,
          numInPage: 100,
        },
        callback: (data, columns) => {
          if (data) {
            this.setState({
              riskInfromation: data,
              columns: columns,
            });
          } else {
            this.setState({
              riskInfromation: [],
              columns: columns,
            });
          }
        },
      });
      this.setState({ isRisk: true });
    }
    //交易所现券、ETF、股票、交易所质押式回购,港股通，且委托方向为买卖时，展示成交信息
    if (
      (detailObj.type == '0' && (detailObj.trade0.orderSide == '1' || detailObj.trade0.orderSide == '2')) ||
      (detailObj.type == '9' && (detailObj.trade9.direction == '1' || detailObj.trade9.direction == '2')) ||
      (detailObj.type == '7' && (detailObj.trade7.orderSide == '1' || detailObj.trade7.orderSide == '2')) ||
      (detailObj.type == '15' && (detailObj.trade15.orderSide == '1' || detailObj.trade15.orderSide == '2')) ||
      (detailObj.type == '19' && (detailObj.trade19.direction == '1' || detailObj.trade19.direction == '2'))
    ) {
      dispatch({
        type: 'queryTradeM/clinchInfromation',
        payload: { id: detailObj.id },
        callback: (data) => {
          if (data) {
            this.setState({
              clinchInfromation: data,
            });
          } else {
            this.setState({
              clinchInfromation: undefined,
            });
          }
        },
      });
      this.setState({ isClinch: true });
    }
    setTimeout(() => {
      this.setState({
        timeStamp: new Date().getTime(),
      });
    }, 100);
  }

  loadValue = (record) => {
    if (record) {
      let trade = typeOfTradeX(record);
      if (trade) {
        if (record.type == 8) {
          this.setState({
            infoDetail: {
              tradeInstruction: {
                id: record.id,
              },
              ...trade,
              combCode: record.portfolioInfoId, //产品编号
              fundCode: record.productId, //组合编号
            },
          });
          if (trade.orderSize == 'F') {
            this.setState({
              instructType: '1',
            });
          } else if (trade.orderSize == 'i') {
            this.setState({
              instructType: '2',
            });
          } else {
            this.setState({
              instructType: '3',
            });
          }
        }
        this.setState({
          infos: trade,
          info: record,
          type: record.type,
        });
      }
    }
  };

  // 指令信息
  showTable = () => {
    const { type, info, infos, infoDetail, instructType } = this.state;
    switch (type) {
      case '0':
        return <BondTradeDetailC type={3} info={info ? info : {}} />;
      case '1':
        return <BondTradeDetailC type={3} info={info ? info : {}} />;
      case '2':
        return <BondTradeDetailC type={3} info={info ? info : {}} />;
      case '3':
        return <BondTradeDetailC type={3} info={info ? info : {}} />;
      case '4':
        return <InterBank type={3} info={info ? info : {}} />;
      case '5':
        return (
          <div style={{ height: '330px' }}>
            <FundTrade type={info && info.isEdit ? 'edit' : '3'} info={info ? info : {}} onCancel={this.onCancel} onRef={(ref) => (this.FundTrade = ref)} />
          </div>
        );
      case '6':
        return <FinaFlockDetailC type={3} info={info ? infos : {}} />;
      case '7':
        return <BuyBackOrderExchangePledge type={3} info={info ? info : {}} />;
      case '8':
        return <DepositOrderDetail instructType={instructType} infoDetail={infoDetail} state={5} />;
      case '9':
        return <EftBuySellC type={4} info={infos ? infos : {}} />;
      case '12':
        return <NonstandardOrderDetailC type={3} info={info ? infos : {}} />;
      case '13':
        return <BuyBackContractC tradeInfo={info ? info : {}} timeStamp={this.state.timeStamp} />;
      case '15':
        return <InstructionSend type='5' initValue={info ? info : {}} edit={false} onRef={(ref) => (this.Instructionsend = ref)} />;
      case '16':
        return <BondLend type='3' initValue={infos ? infos : {}} />;
      case '17':
        return <BondOffLine type={info && info.isEdit ? '5' : '3'} onCancel={this.onCancel} onRef={(ref) => (this.BondOffLine = ref)} info={info ? info : {}} />;
      case '19':
        return <HKdetail type='3.1' onCancel={this.onCancel} info={info ? infos : {}} />;
      case '25':
        return <BondTradeDetailC type={3} info={info ? info : {}} />;
    }
  };

  //风控信息
  riskTable = () => {
    return (
      <div>
        <SecondHeaderC title='风控信息' />
        <div style={{ paddingRight: '55px', paddingLeft: '10px' }}>
          <TableC columns={this.state.columns} loading={this.props.loading} dataSource={this.state.riskInfromation} scroll={{ y: '231px' }} rowKey='id' hidePage={true} />
        </div>
      </div>
    );
  };

  // 成交信息
  clinchTable = () => {
    const { clinchInfromation } = this.state;
    return (
      <div style={{ marginTop: '10px' }}>
        <SecondHeaderC title='成交信息' />
        <div style={{ paddingRight: '55px' }}>
          <Row>
            <Col span={6}>
              <InputNumberC
                dataIndex={'costAverage'}
                title={'成交均价'}
                form={this.props.form}
                unit={this.props.detailObj.type == '7' ? '%' : '元'}
                initialValue={clinchInfromation && clinchInfromation.costAverage}
                splitStyle={true}
                precision={3}
                disabled={true}
                formItemLayout={FormItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'turnoverNum'}
                title={'累计成交数量'}
                form={this.props.form}
                unit='股'
                initialValue={clinchInfromation && clinchInfromation.turnoverNum}
                splitStyle={true}
                precision={0}
                disabled={true}
                formItemLayout={FormItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'turnoverMoney'}
                title={'累计成交金额'}
                form={this.props.form}
                unit='元'
                initialValue={clinchInfromation && clinchInfromation.turnoverMoney}
                splitStyle={true}
                precision={3}
                disabled={true}
                formItemLayout={FormItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'nullTurnover'}
                title={'未成交数量'}
                form={this.props.form}
                unit='股'
                initialValue={clinchInfromation && clinchInfromation.nullTurnover}
                splitStyle={true}
                precision={0}
                disabled={true}
                formItemLayout={FormItemLayout}
              />
            </Col>
          </Row>
        </div>
      </div>
    );
  };

  //取消
  onCancel = () => {
    this.props.changeVisible(false);
  };
  //渲染审批历史 目前只支持交易所质押式回购指令
  renderHistory = () => {
    return (
      <div style={{ marginTop: '10px' }}>
        <SecondHeaderC title='审批历史' />
        <ApprovalHistory processInstanceId={this.state.info?.id} type={'businessKey'} />
      </div>
    );
  };

  render() {
    return (
      <ModalC title={'明细'} visible={this.props.visible} maskClosable={false} footer={undefined} width={1200} onOk={this.onCancel} onCancel={this.onCancel}>
        <div style={{ marginLeft: '-10px' }}>
          <Row>
            <Col span={6}>
              <SelectC
                dataIndex={'busStatus'}
                title={'指令状态'}
                disabled={true}
                form={this.props.form}
                dataSource={statusData.busStatus}
                initialValue={this.state.info ? this.state.info.busStatus : undefined}
                formItemLayout={FormItemLayout}
              />
            </Col>
          </Row>
        </div>
        <div>
          <SecondHeaderC title='指令信息' />
        </div>
        {this.showTable()}
        {/* {this.state.isRisk && this.riskTable()} */}
        {this.state.type == 7 && this.renderHistory()}
        {this.state.isClinch && this.clinchTable()}
      </ModalC>
    );
  }
}
export default connect(({ queryTradeM, loading }) => ({
  queryTradeM,
  loading: loading.effects['queryTradeM/riskInfromation'],
}))(Detail);
